<template>
	<view id="home" ref="page" class="page">
		<nav-bar class="background fixed-top nav" ref="nav">
			<image class="image" slot="left" src="../../static/img/home/category.svg" alt="" @click="category" />
			<search slot="center" style="width: 100%;" />
			<image class="image" slot="right" src="../../static/img/home/my.svg" alt="" @click="toMy" />
		</nav-bar>
		<view class="swiper away-top " ref="swiper">
			<view class="background-box">
				<uni-swiper class="uni-swiper-box" mode="nav" :info="banners">
					<swiper class="swiper-box">
						<swiper-item class="swiper-item" v-for="(item, index) in banners" :key="index">
							<image class="image" :src="item.image" aspectFill></image>
						</swiper-item>
					</swiper>
				</uni-swiper>
			</view>

		</view>
		<feature-view ref="feature" class="feature" />

		<scroll-view :show-scrollbar="false" scroll-y="true">
			<tab-control :titles="titles" @tabClick="tabClick" ref="tab" :class="ceiling" class="tab" />
			<view class="box" v-if="over" />
			<good-list :goods="CurrentGoods" />
		</scroll-view>
		<back-top v-show="isBottom" @click.native="backTop" />
	</view>
</template>
<script>
	import NavBar from "components/common/NavBar/NavBar";
	import Search from "components/common/Search/Search";

	import HomeRecommond from "./child/HomeRecommond";
	import FeatureView from "./child/FeatureView";

	import TabControl from "components/content/Tab/TabControl";
	import GoodList from "components/content/Goods/GoodList";
	import BackTop from "components/content/BackTop/BackTop";

	import {
		debounce
	} from "common/utils";

	import {
		getHomeGoods
	} from "network/home";

	export default {
		name: "Home",
		data() {
			return {
				banners	: [{
						link: "https://act.mogujie.com/huanxin0001?acm=3.mce.2_10_1jhwa.43542.0.ccy5br4OlfK0Q.pos_0-m_454801-sd_119",
						image: "https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg",
						title: "焕新女装节",
					},
					{
						link: "https://act.mogujie.com/ruqiu00001?acm=3.mce.2_10_1ji16.43542.0.ccy5br4OlfK0R.pos_1-m_454889-sd_119",
						image: "https://s10.mogucdn.com/mlcdn/c45406/180926_31eb9h75jc217k7iej24i2dd0jba3_750x390.jpg",
						title: "入秋穿搭指南",
					},
					{
						link: "https://act.mogujie.com/huanji001?acm=3.mce.2_10_1jfj8.43542.0.ccy5br4OlfK0S.pos_2-m_453270-sd_119",
						image: "https://s10.mogucdn.com/mlcdn/c45406/180919_3f62ijgkj656k2lj03dh0di4iflea_750x390.jpg",
						title: "秋季护肤大作战",
					},
					{
						link: "https://act.mogujie.com/liuxing00001?acm=3.mce.2_10_1jepe.43542.0.ccy5br4OlfK0T.pos_3-m_452733-sd_119",
						image: "https://s10.mogucdn.com/mlcdn/c45406/180917_18l981g6clk33fbl3833ja357aaa0_750x390.jpg",
						title: "流行抢先一步",
					},
				],
				recommends: null,
				goods: {
					pop: {
						page: 0,
						list: []
					},
					new: {
						page: 0,
						list: []
					},
					sell: {
						page: 0,
						list: []
					},
				},
				current: 0,
				type: "pop",
				offsetTop: null,
				types: ["pop", "new", "sell"],
				titles: ["流行", "新款", "精选"],
				over: false,
				isBottom: false,
				statusBarHeight: 0,
			};
		},
		components: {
			NavBar,
			HomeRecommond,
			FeatureView,
			TabControl,
			GoodList,
			BackTop,
			Search,
		},
		created() {

			//获取商品封面数据
			this.getHomeGood("pop");
			this.getHomeGood("sell");
			this.getHomeGood("new");
		},
		async mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// #ifdef H5
			this.offsetTop = parseInt(
				this.$refs.swiper.$el.offsetHeight +
				this.$refs.nav.$el.offsetHeight / 2 +
				this.$refs.feature.$el.offsetHeight);

			this.pageHeight = this.$refs.page.$el.offsetHeight;
			//#endif

			// #ifdef MP-WEIXIN || APP
			let offsetTop,pageHeight;
			await new Promise((resolve, reject) => {
				wx.createSelectorQuery().select('.page').boundingClientRect((rect) => {
					pageHeight = rect.height // 节点的高度
					resolve()
				}).exec()
			})
			
			await new Promise((resolve, reject) => {
				wx.createSelectorQuery().select('.tab').boundingClientRect((rect) => {
					console.log('tab',rect)
					// #ifdef APP
					offsetTop = rect.top - 80;
					// #endif
					// #ifdef MP-WEIXIN
					offsetTop = rect.top - 110;
					// #endif
					resolve()
				}).exec()
			})
			this.offsetTop = offsetTop;
			this.pageHeight = pageHeight;
			//#endif
			uni.setStorage({
				key: 'pageHeight',
				data: this.pageHeight,
			});
		},
		onPageScroll(e) {
			this.over = e.scrollTop >= this.offsetTop;
			this.isBottom = this.pageHeight < e.scrollTop;
		},
		onReachBottom() {
			this.getHomeGood(); //获取商品数据
		},
		methods: {
			category() {
				uni.switchTab({
					url: '/pages/category/Category'
				})
			},

			//tabi点击切换商品视图
			tabClick(index) {
				this.type = this.types[index];
				uni.pageScrollTo({
					duration: 100,
					scrollTop: this.offsetTop
				});
			},

			// 获取对应商品封面数据
			getHomeGood(type = this.type) {
				const page = ++this.goods[type].page;
				getHomeGoods(type, page).then((res) => {
					this.goods[type].list.push(...res[1].data.data);
				});
			},

		},
		computed: {
			CurrentGoods() {
				return this.goods[this.type].list;
			},
			ceiling() {
				return (this.offsetTop && this.over) ? "ceiling" : "";
			},
		},
	};
</script>
<style lang="scss" scoped>
	.nav {
		.image {
			width: 52rpx;
			height: 52rpx;
		}
	}

	#home {
		background-color: white;
		width: 100vw;
		overflow-x: hidden;

		position: relative;

		.background {
			background: linear-gradient(rgb(221, 0, 0), #ff1717);
		}

		.swiper {
			height: 440rpx;
			width: 100vw;

			.background-box {
				height: 300rpx;
				border-bottom-left-radius: 80rpx;
				border-bottom-right-radius: 80rpx;
				background: linear-gradient(#ff1717, #e66465) no-repeat;

				.uni-swiper-box {

					.swiper-box {
						display: flex;
						justify-content: center;
						box-sizing: border-box;
						height: 440rpx;
						width: 100vw;

						.swiper-item {
							display: flex;
							justify-content: center;

							.image {
								height: 100%;
								width: 90vw;
							}
						}
					}
				}
			}
		}

		.ceiling {
			position: fixed;
			width: 100%;
			/* #ifdef MP */
			top: 198rpx;
			/* #endif */

			/* #ifdef H5 */
			top: 90rpx;
			/* #endif */
			/* #ifdef APP */
			top: calc(84rpx + var(--status-bar-height));
			/* #endif */
		}

		.box {
			height: 90rpx;
			width: 100%;
		}

	}

	@media screen and (min-width: 500rpx) {
		.uni-swiper-box {
			width: 800rpx;
			margin: 0 auto;
			margin-top: 16rpx;
		}

		.image {
			width: 100%;
		}
	}
</style>
